<template>
  <div id="read-list">
    <!-- <div class="nav-container"> -->
      <!-- <div class="tab-panel" :ref="newsList"> -->
        <!-- <van-pull-refresh v-model="refreshLoading" @refresh="getDataList(true, false)"> -->
          <!-- <img
            slot="loading"
            class="loading-gif-refresh"
            src="../../assets/loading.gif"
          > -->
          <template v-if="newsFinished && newsList.length == 0">
            <div class="no-data-img">
              <img src="../../assets/meeting/no_meeting.png">
              <p>暂无已阅人员</p>
            </div>
          </template>
          <!-- <van-list
            v-show="newsList.length > 0"
            :offset="100"
            v-model="isLoading"
            :finished="newsFinished"
            finished-text="没有更多数据了"
            @load="getDataList(false, false)">
            <div class="read-card" v-for="item in newsList">
              <van-image height="40px" width="40px" :src="$common.returnImg(item.pic)" fit="cover"/>
              <div class="info-wrap">
                <p class="reader-name">{{ item.name }}</p>
                <p class="read-time">{{ item.viewdate }}</p>
              </div>
            </div>
          </van-list> -->
          <van-list
            v-else
            ref="list"
            v-model="isLoading"
            :offset="10"
            :immediate-check="false"
            :finished="newsFinished"
            finished-text="没有更多了"
            @load="getDataList(false, false)"
          >
            <div class="read-card" v-for="item in newsList">
              <van-image v-if="item.pic != 0" height="40px" width="40px" :src="$common.returnImg(item.pic)" fit="cover" @click="checkIdCard(item.uid)"/>
              <img v-else height="40px" width="40px" src="../../assets/notification/head.png" @click="checkIdCard(item.uid)"/>
              <div class="info-wrap">
                <p class="reader-name">{{ item.name }}</p>
                <p class="read-time">{{ $common.convertDate(item.viewdate) }}</p>
              </div>
            </div>
          </van-list>
        <!-- </van-pull-refresh> -->
      <!-- </div> -->
    <!-- </div> -->
  </div>
</template>

<script type="text/javascript">
  export default {
    data() {
      return {
        newsList: [],
        newsPage: 1,
        newsFinished: false,

        refreshLoading: false,
        isLoading: false,
      }
    },
    activated() {
      this.getDataList(true, true)
      setTimeout(_ => {
        this.$bridge.callHandler('navBack')
        // 强制跳转
        this.$bridge.registerHandler('navBackClicked', _ => {
          this.$router.push({name: 'newsDetail', query: { id: this.$route.query.id, type: this.$route.query.type, from: this.$route.query.from }})
        })
        if(this.$route.query.type == 1) {
          this.$bridge.callHandler('navTitle', {title: '已阅人员'})
        } else {
          this.$bridge.callHandler('navBackground', {title: '已阅人员'})
        }
      }, 200)
      
    },
    mounted() {
    },
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
        }, 500);
      },
      /**
       * 获取列表数据
       * @return {[type]} [description]
       */
      getDataList(init, showToast) {
        let self = this

        if(init) { //初始化查询
          self.newsList = []
          self.newsPage = 1
          self.newsFinished = false
        }

        let config = {
          url: `${this.$common.basePath}aatp5/public/index.php/message/Notices/readList`,
          data: {
            pageIndex: self.newsPage++,
            id: self.$route.query.id,
            uid: self.$store.state.userId,
          },
          method: 'POST'
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self.newsFinished) {
          self.$axios(config).then(res => {
            self.isLoading = false
            self.newsList = init ? res.data.data : self.newsList.concat(res.data.data)
            self.$refs.list.check()
            if(res.data.data.length == 0 || self.newsList.length >= res.data.count) {
              self.newsFinished = true
            }
            self.refreshLoading = false;
            self.$toast.clear()
          }).catch(err => {
            self.$toast.clear()
          })
        }
      },
      /**
       * 头像查看身份
       * @return {[type]} [description]
       */
      checkIdCard(uid) {
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>

<style lang="less" scoped>
  #read-list {
    min-height: calc( 100vh - 10px );
    padding-top: 10px;
    background: #F4F4F4;
  }
  .van-pull-refresh {
    min-height: calc( 100vh - 10px );
  }
  #read-list {
    & /deep/ .read-card {
      display: flex;
      padding: 15px;
      background: #fff;
      border-bottom: 1px solid #F5F5F5;
      .info-wrap {
        margin-left: 15px;
        width: calc( 100% - 45px );
        .reader-name {
          margin: 0;
          margin-bottom: 10px;
        }
        .read-time {
          margin: 0;
          font-size: 12px;
          color: #999;
        }
      }
      .van-image img, img {
        border-radius: 4px;
      }
    }
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30% 0 30% 0;
    background-color: #F4F4F4;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>